<template>
  <common-card title="今日订单" :value="orderToday|numberFormat">
    <template>
      <!-- <div ref="chart" style="width:100%;height:100%;"></div> -->
      <v-chart :option="getOption()" autoresize/>
    </template>
    <template #bottom>
      <span>昨日订单量</span>
      <span class="emphasis">{{ orderLastDay|numberFormat }}</span>
    </template>
  </common-card>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'TodayOrders',

  computed: {
    ...mapState({
      /*
      "orderToday": 2562061,
      "orderLastDay": 2100000,
      "orderTrend": [610, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220],
      "orderTrendAxis": ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00"],
      */
      orderToday: state => state.data.reportData.orderToday,
      orderLastDay: state => state.data.reportData.orderLastDay,
      orderTrend: state => state.data.reportData.orderTrend || [],
      orderTrendAxis: state => state.data.reportData.orderTrendAxis || []
    })
  },

  /* watch: {
    // 监视数据改变
    orderTrend () {
      // 重新给图表设置带数据的option
      this.chart.setOption(this.getOption())
    }
  }, */
  /* mounted () {
    // 初始化生成图表对象
    this.chart = this.$echarts.init(this.$refs.chart)
    // 设置配置
    this.chart.setOption(this.getOption())

    // 解决: 容器尺寸发生变化后, 能重新自适应显示
    // 监视窗口大小的改变
    window.addEventListener('resize', () => {
      // 让图表自适应更新
      this.chart.resize()
    })

  }, */

  methods: {
    getOption () {
      return {
        // x轴
        xAxis: {
          boundaryGap: false, // 左右两边完全充满
          show: false, // 不显示
          data: this.orderTrendAxis,
        },
        // y轴
        yAxis: {
          show: false,
        },
        // 系列
        series: {
          name: '实时订单数',
          type: 'line',
          data: this.orderTrend,
          smooth: true, // 光滑的
          areaStyle: {// 下面的区域
            color: '#5470C6'
          },
          itemStyle: { // 点
            opacity: 0, // 隐藏
          },
          lineStyle: { // 线  隐藏
            opacity: 0
          },


        },

        // 让图表充满
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
        },

        // 提示
        tooltip: {
          trigger: 'axis',
          // 问题: 窗口挡住鼠标
          // confine: true, // 限制在图表区域内显示
          // 指定提示框的位置
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角为原点，x轴向右，y轴向下

            // x坐标位置
            let x = 0;
            // 当前鼠标X轴位置
            let pointX = point[0];
            // 提示框的宽度
            let boxWidth = size.contentSize[0];
            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else { // 左边放的下
              x = 5 + pointX - boxWidth;
            }
            // 返回左上角的x和y坐标值
            return [x, -40];
          }
        }
      }
    }
  }
}
</script>

